<template>
	<view class="withdrawal" style="margin: 0 25rpx;" v-if="userInfo&&config">
		<view class="top-box">
			<image src="../../static/wallet/money.png" mode="scaleToFill" style="width: 66rpx;height: 66rpx;"></image>
			<view style="color: rgba(255, 255, 255, 0.64);margin-top: 20rpx;">{{$t('总余额')}}</view>
			<view style="font-size: 54rpx;font-weight: bold;margin-top: 20rpx;">{{userInfo.money}}</view>
		</view>
		<view class="title-box" style="margin-top: 60rpx;">
			<view class="title-left"></view>
			<view style="flex: 1;" class="font-34 bold u-flex u-flex-between u-flex-items-center">
			<span>{{$t('充值金额')}}</span>
			<!-- <span class="font-28 ">1{{config.coin}} = {{config.buy_gold}}{{$t('M币')}}</span> -->
			</view>
		</view>
		<view class="u-flex u-flex-wrap u-flex-between ice-mt-20">
			<view class="money-box" :class="{active:nowIdx==idx}" @click="chooseMoney(coinInfo.coin,idx)"
				v-for="(coinInfo,idx) in config.recharge_arr_2" :key="idx">
				<view class="font-32 bold">{{coinInfo.coin}}{{config.coin}}</view>
				<view class="theme-color bold font-30" style="margin-top: 4rpx;">{{coinInfo.num}}{{$t('M币')}}</view>
			</view>
			<view class="money-box" :class="{active:nowIdx==-1}" @click="chooseMoney(0,-1)">
				<view class="font-32 bold">其他</view>
				<view class="theme-color bold font-30" style="margin-top: 4rpx;"></view>
			</view>
			<view style="width: 222rpx;;"></view>
			<view style="width: 222rpx;;"></view>
			<view style="width: 222rpx;;"></view>
			<view style="width: 222rpx;;"></view>
		</view>
		<view v-if="nowIdx === -1" class="ice-mt-20 u-flex u-flex-items-center">
			<u--input border="surround" v-model="money" :placeholder="config.coin" style="width: 300rpx;" ></u--input>
			<span style="flex: 1;" class="ice-ml-30"> = {{((money?parseFloat(money):0)*config.buy_price*config.buy_gold).toFixed(0)}} {{$t('M币')}}</span>
			
		</view>
		<view style="position: fixed;width: 700rpx;bottom: 34rpx;;left: 25rpx;">
			<u-button size="large" shape="circle" @click="getAddress" :text="$t('立即充值')"
				color="linear-gradient(106deg, #258CE9, #DA2B45)"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowIdx: 0,
				type: "",
				userInfo: null,
				money: '',
				config: null
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: this.$t("充值")
			})
			this.web3 = new Web3(window.ethereum);
			this.getConfig()
			this.getUserInfo();
		},
		methods: {
			getAddress() {
					if (this.money <= 0) {
						uni.showToast({
							title: this.$t('金额错误'),
							icon: "none"
						})
						return
					}
					this.transferToken()
				},
				async transferToken() {
					uni.showLoading({
						title:'Loading...',
					})
					try {
						let address = await uni.$ice.getAddress();
						console.log(address)
						if (this.userInfo.username != address) {
							uni.removeStorageSync("token")
							await uni.$ice.checkLogin()
							this.getUserInfo()
							uni.hideLoading()
							return;
						}
						// 创建代币合约实例
						const contract = new this.web3.eth.Contract(
							[{
								constant: false,
								inputs: [{
										name: '_to',
										type: 'address'
									},
									{
										name: '_value',
										type: 'uint256'
									}
								],
								name: 'transfer',
								outputs: [{
									name: '',
									type: 'bool'
								}],
								type: 'function'
							}],
							this.config.contact_address
						);
						//4629491002
						// 发送交易
						const txHash = await contract.methods
							.transfer(this.config.recharge_address, this.web3.utils.toWei(this.money, this.config.decimal))
							.send({
								from: this.userInfo.username
							});
						console.log('txHash', txHash)
						uni.hideLoading()
						uni.showModal({
							title: this.$t('提示'),
							content: this.$t('充值成功，请耐心等待'),
							showCancel: false
						})
					} catch (e) {
						uni.hideLoading()
						console.log('转账失败:', e);
						uni.showModal({
							title: this.$t('提示'),
							content: this.$t('转账失败,'+(e.error.message||'')),
							showCancel: false
						})
					}
				},
			
			getConfig() {
				uni.$ice.post('index/config', {}, false).then(res => {
					this.config = res.data
					this.money = this.config.recharge_arr_2[0].coin;
				}).catch(err => {

				})
			},
			chooseMoney(money, idx) {
				this.nowIdx = idx;
				this.money = money;
			},
			getUserInfo() {
				let tmp = uni.getStorageSync('userInfo')
				if (tmp) {
					this.userInfo = JSON.parse(tmp)
				}
				uni.$ice.post('user/index', {}, false).then(res => {
					uni.setStorageSync('userInfo', JSON.stringify(res.data));
					this.userInfo = res.data
					uni.stopPullDownRefresh()

				}).catch(err => {

				})
			},
	}
	}
</script>

<style scoped>
	.withdrawal {
		padding-top: 20px
	}

	.top-box {
		background: linear-gradient(119deg, #258CE9, #DA2B45);
		border-radius: 12rpx;
		margin: auto;
		text-align: center;
		padding: 54rpx 0 60rpx 0;
	}

	.money-box {
		width: 222rpx;
		height: 155rpx;
		background: #181818;
		border-radius: 12rpx;
		border: 1px solid #252525;
		margin-top: 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.money-box.active {
		background: linear-gradient(106deg, #258CE9, #DA2B45);
	}

	.money-box.active .theme-color {
		background: unset;
		-webkit-text-fill-color: initial;
		-webkit-background-clip: initial;
		color: #ffffff;
	}
</style>